 <template>
  <div id="app3">
    <header class="header">
      <div>
        <div class="title">
          <img src="../../assets/images/01_11.png" alt class="img_zuo" @click="fanhui_btn" />
          <div>目标考核</div>
          <div class="btn-add">
            <div class="datatime">
              <img src="../../assets/images/99.png" class="lefts" @click="less" alt />
              <span class="datatime-intro">{{dataNum}}</span>
              <img src="../../assets/images/99.png" class="rights" @click="add" alt />
            </div>
          </div>
        </div>
      </div>
    </header>
    <div class="main">
      <div class="main_head">
        <span class="main_head_font">履职类别统计(共计履职{{count_hu}}次)</span>
      </div>
      <div class="main_center">
        <div class="main_center_item">
          <div>
            <div class="su_prent">
              <span class="su su_3 b_c_2"></span>
              <span class="font_42">{{data_bzt[0].name}}</span>
            </div>
            <div class="font_36_huise">{{data_bzt[0].value}}%({{data_bzt[0].cunt}}次)</div>
          </div>
          <div>
            <div class="su_prent">
              <span class="su su_3 b_c_11"></span>
              <span class="font_42">{{data_bzt[1].name}}</span>
            </div>
            <div class="font_36_huise">{{data_bzt[1].value}}%({{data_bzt[1].cunt}}次)</div>
          </div>
          <div>
            <div class="su_prent">
              <span class="su su_3 b_c_12"></span>
              <span class="font_42">{{data_bzt[2].name}}</span>
            </div>
            <div class="font_36_huise">{{data_bzt[2].value}}%({{data_bzt[2].cunt}}次)</div>
          </div>
          <div>
            <div class="su_prent">
              <span class="su su_3 b_c_13"></span>
              <span class="font_42">{{data_bzt[3].name}}</span>
            </div>
            <div class="font_36_huise">{{data_bzt[3].value}}%({{data_bzt[3].cunt}}次)</div>
          </div>
        </div>
        <div id="bingtu" ref="bingtu"></div>
        <div class="main_center_item">
          <div>
            <div class="su_prent">
              <span class="su su_2 b_c_14"></span>
              <span class="font_42">{{data_bzt[4].name}}</span>
            </div>
            <div class="font_36_huise">{{data_bzt[4].value}}%({{data_bzt[4].cunt}}次)</div>
          </div>
          <div>
            <div class="su_prent">
              <span class="su su_4 b_c_15"></span>
              <span class="font_42">{{data_bzt[5].name}}</span>
            </div>
            <div class="font_36_huise">{{data_bzt[5].value}}%({{data_bzt[5].cunt}}次)</div>
          </div>
          <div>
            <div class="su_prent">
              <span class="su su_3 b_c_16"></span>
              <span class="font_42">{{data_bzt[6].name}}</span>
            </div>
            <div class="font_36_huise">{{data_bzt[6].value}}%({{data_bzt[6].cunt}}次)</div>
          </div>
          <div>
            <div class="su_prent">
              <span class="su su_3 b_c_17"></span>
              <span class="font_42">{{data_bzt[7].name}}</span>
            </div>
            <div class="font_36_huise">{{data_bzt[7].value}}%({{data_bzt[7].cunt}}次)</div>
          </div>
        </div>
      </div>
      <div class="hr_s">
        <div class="hr"></div>
      </div>
      <div class="main_fool_flex">
        <div class="jd">单位履职进度</div>
        <div style="display: flex;align-items: center;">
          <span class="yzg_iconed"></span>履职进度
        </div>
      </div>
      <div style="display:flex">
        <div class="all-bigbox">
          <div class="all-big" v-for="(item,index) in jiedao" :key="index" @click="go(item.dwid)">
            <div class="big-box">
              <div class="mctit">{{item.mc}}</div>
              <div class="responsible">
                <div class="responsible-tit">主要负责人</div>
                <van-progress
                  :percentage="item.zyTotalFinishNum/item.zyTotalNum*100"
                  pivot-text
                  stroke-width="20"
                />
              </div>
              <div class="responsible">
                <div class="responsible-tit">班子成员</div>
                <van-progress
                  :percentage="item.bzTotalFinishNum/item.bzTotalNum*100"
                  pivot-text
                  stroke-width="20"
                />
              </div>
              <div class="responsible">
                <div class="responsible-tit">安全负责人</div>
                <van-progress
                  :percentage="item.aqTotalFinishNum/item.aqTotalNum*100"
                  pivot-text
                  stroke-width="20"
                />
              </div>
              <div class="responsible">
                <div class="responsible-tit">其他负责人</div>
                <van-progress
                  :percentage="item.qtTotalFinishNum/item.qtTotalNum*100"
                  pivot-text
                  stroke-width="20"
                />
              </div>
            </div>
          </div>
        </div>
        <div class="all-bigbox">
          <div class="all-bigtwo" v-for="(item,index) in bumen" :key="index" @click="go(item.dwid)">
            <div class="big-box">
              <div class="mctit">{{item.mc}}</div>
              <div class="responsible">
                <div class="responsible-tit">主要负责人</div>
                <van-progress
                  :percentage="item.zyTotalFinishNum/item.zyTotalNum*100"
                  pivot-text
                  stroke-width="20"
                />
              </div>
              <div class="responsible">
                <div class="responsible-tit">班子成员</div>
                <van-progress
                  :percentage="item.bzTotalFinishNum/item.bzTotalNum*100"
                  pivot-text
                  stroke-width="20"
                />
              </div>
              <div class="responsible">
                <div class="responsible-tit">安全负责人</div>
                <van-progress
                  :percentage="item.aqTotalFinishNum/item.aqTotalNum*100"
                  pivot-text
                  stroke-width="20"
                />
              </div>
              <div class="responsible">
                <div class="responsible-tit">其他负责人</div>
                <van-progress
                  :percentage="item.qtTotalFinishNum/item.qtTotalNum*100"
                  pivot-text
                  stroke-width="20"
                />
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <Tabbar></Tabbar>
  </div>
</template>
<script>
import { Dialog } from "vant";
import Tabbar from "../tabbar.vue";
import echarts from "echarts";
export default {
  name: "tj_tu_4",
  data() {
    return {
      menuFlag: false,
      userId: null,
      items: [],
      data_bzt: [
        { name: "", value: "", },
        { name: "", value: "",},
        { name: "", value: "",},
        { name: "", value: "",},
        { name: "", value: "",},
        { name: "", value: "",},
        { name: "", value: "",},
        { name: "", value: "",},
      ],
      data_zxt: [],
      data_zxt_month: [],
      data_zxt_value: [],
      data_zzt: [],
      yue: null,
      data_zzt_month: [],
      data_zzt_value: [],
      data_zzt_value1: [],
      list_id: "",
      count_hu: null,
      ym_title: "",
      is_jd: false,
      list_path_canshu: [],
      ct_cunt: 0,
      sehqu_id: null,
      dwId: "",
      lev: "",
      sq_list_show: [],
      sq_list: [],
      sq_sqid: null,
      sq_page: 1,
      sq_pageSize: 50,
      loading: false,
      finished: false,
      refreshing: false,
      load_over: false,
      statistics: "",
      dataNum: 2020,
      bumen: [],
      jiedao: [],
    };
  },
  components: {
    Tabbar,
  },
  methods: {
    fanhui_btn() {
      this.$router.back();
    },
    go(id) {
      var dwid = localStorage.setItem("abandonid", id);
      var year = localStorage.setItem("year", 2020);
      console.log(id);
      this.$router.push({
        path: "/mbkh-intro",
        query: {
          id: dwid,
          year: year,
        },
      });
      // this.$router.push("/mbkh-intro");
    },
    less() {
      // this.dataNum--;
    },
    add() {
      // this.dataNum++;
    },
    info() {
      //获取数据
      try {
        plus.nativeUI.showWaiting("正在加载...");
      } catch (e) {
        console.log("plus问题");
      }
      this.axios
        .get(
          `${
            this.$global_msg.Url.host
          }/performancereport/categoryStatistics?userId=${
            this.userId
          }&year=${2020}`
        )
        .then((res) => {
          console.log(res);
          if (res.data.code == 200) {
            this.statistics = res.data.rows.list;
            this.count_hu = res.data.rows.total;
            let a = [];
            let b = [
               {name:'巡查排查'},
               {name:'风险研判'},
               {name:'警示约谈'},
               {name:'隐患协调'},
               {name:'现场安全宣传'},
               {name:'入户安全宣传'},
               {name:'网络安全宣传'},
               {name:'安排部署'}
            ]
            for(let i=0;i<res.data.rows.list.length;i++){
              if (res.data.rows.list[i]) {
                a.push({
                  name: res.data.rows.list[i].mc,
                  value: (res.data.rows.list[i].percent * 100).toFixed(2),
                  cunt: res.data.rows.list[i].num,
                });
              }
            }
            let result = false;
            for(let j=0;j<b.length;j++){
              result = a.some(function(value,index){
                return value.name == b[j].name
              })
              if(!result){
                a.push({
                  name: b[j].name,
                  value: 0,
                  cunt: 0,
                })
              }
              console.log(result)
            }
            // if (res.data.rows.list[0]) {
            //   a.push({
            //     name: res.data.rows.list[0].mc,
            //     value: (res.data.rows.list[0].percent * 100).toFixed(2),
            //     cunt: res.data.rows.list[0].num,
            //   });
            // } else {
            //   a.push({
            //     name: "风险研判",
            //     value: 0,
            //     cunt: 0,
            //   });
            // }
            this.data_bzt = a;
            this.bingzhangtu();
            try {
              plus.nativeUI.closeWaiting();
            } catch (e) {
              console.log("plus问题");
            }
          } else {
            // this.$toast("服务器数据异常!");
          }
        })
        .catch(function (error) {
          console.log(error);
          plus.nativeUI.closeWaiting();
          // alert("获取类型接口异常")
        });
    },
    bingzhangtu() {
      //饼状图
      // var myChar = echarts.init(document.getElementById("bingtu"));
      let a = this.$refs.bingtu;
      if (a) {
        let myChar = echarts.init(a);
        var option = {
          series: [
            {
              // name: '安全警示',
              type: "pie",
              radius: ["40%", "80%"],
              labelLine: {
                //不显示枝条
                show: false,
              },
              label: {
                show: false,
                position: "center",
              },
              color: [
                "#ffa800",
                "#a1e300",
                "#01dbaf",
                "#b500db",
                "#ffeb01",
                "#1adb00",
                "#002edb",
                "#db00d9",
              ], //饼图颜色
              data: this.data_bzt,
            },
          ],
        };
        myChar.setOption(option);
      }
    },
    sequence(a, b) {
      //排序
      if (a.id > b.id) {
        return -1;
      } else if (a.id < b.id) {
        return 1;
      } else {
        return 0;
      }
    },
    progress() {
      this.axios
        .get(
          this.$global_msg.Url.host +
            "/performancereport/departmentalStatistics?userid=" +
            this.userId +
            "&year=2020"
        )
        .then((res) => {
          console.log(res);
          this.bumen = res.data.rows.bumen;
          this.jiedao = res.data.rows.jiedao;
        })
        .catch((err) => {
          console.log(err);
        });
    },
  },
  mounted() {
    var _this = this;
    //物理返回
    // window.addEventListener("popstate", function(){
    //   _this.fanhui_btn();
    // }, false);
  },
  beforeCreate() {
    document.addEventListener("plusready", this.plusReady, false);
  },
  created() {
    this.userId = localStorage.getItem("userId"); //获取访问id
    this.info();
    this.progress();
  },
};
</script>
<style scoped>
* {
  box-sizing: border-box;
}

.header {
  height: 1.8519rem;
  background: #007aff;
  padding-top: 0.8333rem;
  box-sizing: border-box;
  position: fixed;
  width: 100%;
  top: 0;
  z-index: 20;
  font-size: 0.388888rem;
}

.title {
  padding: 0 0.3704rem;
  display: flex;
  align-items: center;
  color: #fff;
}

.title > div {
  width: 100%;
  font-size: 0.4444rem;
  text-align: center;
}

.img_zuo {
  width: 0.2593rem;
  height: 0.463rem;
}
.lefts {
  width: 0.26rem;
  height: 0.4rem;
}
.rights {
  width: 0.26rem;
  height: 0.4rem;
  transform: rotate(-180deg);
}
.datatime {
  width: 2rem;
  display: flex;
  padding: 0 0.24rem;
}
.datatime-intro {
  padding: 0 0.213333rem;
  font-size: 0.32rem;
}
.btn-add {
  position: absolute;
  right: 0.24rem;
  width: auto !important;
  height: 80%;
  bottom: 0;
  display: flex;
  align-items: center;
}
.btn-add {
  font-size: 0.388888rem !important;
}
.btn-search {
  position: absolute;
  right: 1.388888rem;
  bottom: 0.388888rem;
  width: 0.629629rem;
  height: 0.629629rem;
}

.btn-change {
  position: absolute;
  left: 1.537037rem;
  font-size: 0.388888rem;
  bottom: 0.444444rem;
}

/*  */

.main {
  padding-top: 1.8519rem;
  /* height: 100vh; */
  box-sizing: border-box;
  background: #fff;
  padding-bottom: 1.6667rem;
  /* padding-top: 10.0008px; */
}

.main_head {
  height: 1.3889rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 0.3704rem;
}

.img_dt {
  width: 0.3148rem;
  height: 0.4259rem;
  margin-right: 0.0556rem;
}

.main_head_ditu {
  display: flex;
  align-items: center;
  color: #4568ff;
  font-size: 0.3889rem;
  margin-right: 0.3704rem;
}

.main_head_font {
  font-size: 0.4444rem;
  /* font-weight: 600; */
}

.font_36 {
  font-size: 0.3333rem;
}

.font_36_huise {
  font-size: 0.3333rem;
  color: #8e8e8e;
  margin-top: 0.1852rem;
  width: 100%;
  padding-left: 0.5rem;
}

.font_42 {
  font-size: 0.3889rem;
}

/* 圆饼图 */
.main_center {
  display: flex;
  align-items: center;
  width: 100%;
  justify-content: center;
  flex-wrap: wrap;
}

.main_center > div.main_center_item {
  /* width: 3.3333rem; */
  /* height: 3.3333rem; */
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: end;
  box-sizing: border-box;
  padding: 0.266667rem 0.233333rem;
}

#bingtu {
  width: 3.3333rem;
  height: 3.3333rem;
}

.main_center_fool {
  width: 100%;
  display: flex;
}

.main_center_fool > div {
  width: 3.3333rem;
  height: 1.6667rem;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  padding-left: 0.7407rem;
}

.su {
  width: 0.1296rem;
  height: 0.463rem;
  border-radius: 1.8519rem;
  background: #238bff;
  display: inline-block;
  margin-right: 0.3704rem;
}

.su_1 {
  background: #238bff;
}

.su_2 {
  background: #23c9ff;
}

.su_3 {
  background: #ffd548;
}

.su_4 {
  background: #7264f9;
}

.su_5 {
  background: #b164f9;
}

.su_6 {
  background: #64f99c;
}

.su_7 {
  background: #dddddd;
}

.b_c_1 {
  background: #6000ff !important;
}
.b_c_2 {
  background: #ffa800 !important;
}
.b_c_3 {
  background: #08d86a !important;
}
.b_c_4 {
  background: #238bff !important;
}
.b_c_5 {
  background: #8402b4 !important;
}
.b_c_6 {
  background: #ee48d9 !important;
}
.b_c_7 {
  background: #007020 !important;
}
.b_c_8 {
  background: #303030 !important;
}
.b_c_9 {
  background: #48c5ee !important;
}
.b_c_10 {
  background: #9d9802 !important;
}
.b_c_11 {
  background: #a1e300 !important;
}
.b_c_12 {
  background: #01dbaf !important;
}
.b_c_13 {
  background: #b500db !important;
}

.b_c_14 {
  background: #ffeb01 !important;
}
.b_c_15 {
  background: #1adb00 !important;
}
.b_c_16 {
  background: #002edb !important;
}
.b_c_17 {
  background: #db00d9 !important;
}
.su_prent {
  display: flex;
  align-items: center;
}

.hr_s {
  padding: 0 0.3704rem;
}

.hr {
  width: 100%;
  height: 0.3704rem;
  background: #f7f7f7;
  box-sizing: border-box;
}

/* 折线图 柱张图 */
.main_fool {
  width: 100%;
}

.yhzs_prent {
  width: 4.296rem;
  height: 3.7037rem;
  overflow-x: hidden;
  /* padding-right: 0.1852rem; */
}

#zx_tu {
  width: 4.296rem;
  height: 3.7037rem;
}
.yzg_iconed {
  width: 0.5rem;
  height: 0.2rem;
  display: inline-block;
  background: #3398db;
  margin-right: 0.133333rem;
}

/* 柱状图 */
.xcpc_prent {
  width: 4.296rem;
  height: 3.7037rem;
  overflow-x: hidden;
  /* padding-right: 0.1852rem; */
}

#zz_tu {
  width: 4.296rem;
  height: 3.7037rem;
}

.main_fool_su {
  width: 1px !important;
  height: 3.6111rem;
  border-right: 1px solid #ddd;
}

.mian_list {
  width: 100%;
  display: flex;
  padding: 0.2778rem 0;
  flex-wrap: wrap;
}

.mian_list > div {
  width: 50%;
  padding-left: 0.3704rem;
  padding-right: 0.1852rem;
  box-sizing: border-box;
  border-right: 1px solid #ddd;
}

.mian_list > div:nth-child(2n) {
  border-right: none;
  padding-left: 0.1852rem;
}

.item {
  display: flex;
  justify-content: space-between;
  padding-left: 0.3704rem;
  padding-right: 0.1852rem;
  box-sizing: border-box;
  border-bottom: 1px solid #ddd;
  /* border-top: 1Px solid #ddd; */
  margin-bottom: -1px;
  height: 1.3889rem;
  align-items: center;
}

.item > div {
  font-size: 0.3333rem;
}

.item_active {
  border: none;
}

#app3 {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  overflow-y: scroll;
}
/*社区显示的列表*/
.mian_list_sq div {
  width: 100%;
}
.lie_list_item {
  height: 1.37037rem;
  border-bottom: 0.018518518518518517rem solid #f1f1f1;
  display: flex;
  align-items: center;
}

.lie_list_item .xh {
  width: 1rem;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.lie_list_item .name {
  width: 4rem;
  height: 100%;
  display: flex;
  align-items: center;
  font-size: 0.388888rem;
  margin-left: 0.185185rem;
}
.lie_list_item .type {
  width: 2rem;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  font-size: 0.388888rem;
}
.lie_list_item .mj {
  flex: 1;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.388888rem;
}
.lie_list_item .dianhua {
  width: 0.518518rem;
  height: 0.518518rem;
  margin-left: 0.2778rem;
  margin-right: 0.407407rem;
}
.lie_list_item_bg {
  background: #2e5dfe;
  color: #fff;
}
.main_fool_flex {
  display: flex;
  justify-content: space-between;
  padding: 0.266667rem;
}
.all-bigbox {
  width: 50%;
  /* display: flex;
  flex-flow: wrap;
  justify-content: space-between; */
}
.all-big {
  padding-bottom: 0.533333rem;
  /* width: 50%; */
  border-bottom: 1px solid #ddd;
  border-right: 1px solid #ddd;
}
.all-bigtwo {
  padding-bottom: 0.533333rem;
  /* width: 50%; */
  border-bottom: 1px solid #ddd;
  /* border-right: 1px solid #ddd; */
}
.van-progress {
  width: 50%;
}
.responsible {
  display: flex;
  padding: 0.2rem 0 0 0;
  margin-bottom: 0.026667rem;
  /* width: 5rem; */
}
.responsible-tit {
  width: 2rem;
  display: flex;
  justify-content: flex-end;
  margin-right: 0.133333rem;
}
.big-box {
  margin-left: 0.26rem;
  padding-top: 0.266667rem;
  color: #3e3e3e;
  font-size: 0.36rem;
}
.jd {
  /* font-weight:600; */
  font-size: 0.4rem;
}
.mctit {
  font-size: 0.4rem;
  color: #000000;
  /* font-weight:600; */
}
</style>
